import styled from "styled-components";

const AlertHtmlWrapper = styled.div`
    display: ${props => props.alertState ? "flex" : "none"};
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.3);
    z-index: 99;
`

const AlertWrapper = styled.div`
    background-color: #ffffff;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    border-radius: .1rem .1rem 0 0;
    text-align: center;
    opacity: 1;
    z-index: 200;
`
const AlertTitleWrapper = styled.div`
    height: .45rem;
    line-height: .45rem;
    font-size: .12rem;
    color: #999999;
    border-bottom: 1px solid #ccc;
`

const AlertItemWrapper = styled.div`
    height: .55rem;
    line-height: .55rem;
    font-size: .16rem;
    color: #2984f8;
    border-bottom: 1px solid #ccc;
`

const AlertFooterWrapper = styled.div`
    height: .6rem;
    line-height: .6rem;
    font-size: .14rem;
    color: #999999;
    border-top: .1rem solid #f2f2f2;
`

export {
    AlertHtmlWrapper,
    AlertWrapper,
    AlertTitleWrapper,
    AlertItemWrapper,
    AlertFooterWrapper,
}